<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>欢迎使用请假系统</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  <style>
    :root {
      --primary-color: #4a90e2;
      --secondary-color: #2ecc71;
      --accent-color: #9b59b6;
      --text-color: #2c3e50;
      --background-color: #f5f7fa;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: var(--background-color);
      color: var(--text-color);
      margin: 0;
      padding: 0;
      min-height: 100vh;
    }

    .welcome-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    /* 欢迎卡片样式 */
    .welcome-card {
      background: white;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      padding: 40px;
      text-align: center;
      margin-bottom: 40px;
      position: relative;
      overflow: hidden;
    }

    .welcome-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
    }

    .welcome-title {
      font-size: 2.5em;
      color: var(--text-color);
      margin-bottom: 20px;
      font-weight: 700;
      animation: fadeInDown 1s ease;
    }

    .welcome-subtitle {
      font-size: 1.2em;
      color: #666;
      margin-bottom: 30px;
      animation: fadeInUp 1s ease 0.3s;
      animation-fill-mode: both;
    }

    /* 功能卡片区域 */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
      margin-top: 40px;
    }

    .feature-card {
      background: white;
      border-radius: 15px;
      padding: 30px;
      text-align: center;
      transition: transform 0.3s ease;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      animation: fadeIn 1s ease;
      animation-fill-mode: both;
    }

    .feature-card:hover {
      transform: translateY(-10px);
    }

    .feature-icon {
      width: 70px;
      height: 70px;
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
    }

    .feature-icon i {
      font-size: 30px;
      color: white;
    }

    .feature-title {
      font-size: 1.2em;
      color: var(--text-color);
      margin-bottom: 15px;
      font-weight: 600;
    }

    .feature-description {
      color: #666;
      line-height: 1.6;
    }

    /* 动画效果 */
    @keyframes fadeInDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    /* 波浪动画 */
    .wave-container {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      overflow: hidden;
      line-height: 0;
      transform: rotate(180deg);
    }

    .wave {
      position: relative;
      display: block;
      width: calc(100% + 1.3px);
      height: 120px;
    }

    .wave path {
      fill: rgba(74,144,226,0.1);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .welcome-title {
        font-size: 2em;
      }

      .welcome-subtitle {
        font-size: 1em;
      }

      .features-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
<div class="welcome-container">
  <!-- 欢迎卡片 -->
  <div class="welcome-card">
    <h1 class="welcome-title">欢迎使用请假管理系统</h1>
    <p class="welcome-subtitle">高效、便捷的请假管理解决方案</p>

    <!-- 波浪动画 -->
    <div class="wave-container">
      <svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
      </svg>
    </div>
  </div>

  <!-- 功能卡片区域 -->
  <div class="features-grid">
    <div class="feature-card" style="animation-delay: 0.2s">
      <div class="feature-icon">
        <i class="fas fa-calendar-plus"></i>
      </div>
      <h3 class="feature-title">请假申请</h3>
      <p class="feature-description">快速提交请假申请，支持多种请假类型，操作简单便捷。</p>
    </div>

    <div class="feature-card" style="animation-delay: 0.4s">
      <div class="feature-icon">
        <i class="fas fa-tasks"></i>
      </div>
      <h3 class="feature-title">审批管理</h3>
      <p class="feature-description">高效的审批流程，实时跟踪审批状态，及时处理请假申请。</p>
    </div>

    <div class="feature-card" style="animation-delay: 0.6s">
      <div class="feature-icon">
        <i class="fas fa-chart-line"></i>
      </div>
      <h3 class="feature-title">数据统计</h3>
      <p class="feature-description">直观的数据分析，帮助您更好地了解和管理请假情况。</p>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    // 添加滚动动画效果
    $(window).scroll(function() {
      $('.feature-card').each(function() {
        const cardPosition = $(this).offset().top;
        const scrollPosition = $(window).scrollTop();
        const windowHeight = $(window).height();

        if (scrollPosition > cardPosition - windowHeight + 100) {
          $(this).css('opacity', '1');
        }
      });
    });
  });
</script>
</body>
</html>